<template>
  <div class="updatepwd">
    <div class="conten">
      <input type="text" name="" id="" placeholder="请输入初始密码" v-model="lowpad">
     
      <input type="text" name="" id="" placeholder="请输入新密码" v-model="newpad">
   
      <input type="text" name="" id="" placeholder="请确认新密码" v-model="newpads">
    
    </div>
    <div class="update">
      <button type="button" @click="$router.replace('/home')">返回商场</button>
      <button type="button" @click="updataPad">修改密码</button>
    </div>

  </div>
</template>

<script>
import { chengpwd } from '@/api/index.js'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      lowpad: '',
      newpad: '',
      newpads: '',
      stat:true
    }
  },
  methods: {
    async updataPad() {

      if (this.lowpad == '' || (this.newpad == '' && this.newpads == '')) {
        this.$message('密码不能为空')
        return
      }
      if (this.newpad != this.newpads) {
        this.$message('两次密码不一致')
        return
      }
        const regex = /^(?=.*[0-9])(?=.*[a-zA-Z])[0-9a-zA-Z]{11}$/
if (regex.test(this.newpad)) {
 

}else{
   this.$message('密码格式不对')
 return;
}
      let result = await chengpwd(this.userinfo.id, this.lowpad, this.newpad)
      if(result.code == 200){
        this.$message('修改成功')
        this.lowpad = ''
        this.newpad = ''
        this.newpads = ''
      }else{
        this.$message(result.data.msg)
        
           this.lowpad = ''
        this.newpad = ''
        this.newpads = ''
      }
    }
  },
  computed: {
    ...mapGetters(['userinfo'])
  }
}
</script>

<style lang='less',scoped>
.updatepwd {
  .conten {
    width: 300px;
    display: flex;
    flex-direction: column;
    margin: 40px auto;

    input {
      height: 40px;
      width: 300px;
      outline: none;
      margin-top: 10px;
    }
    span {
      color: red;
      font-size: 12px;
    }
  }
  .update {
    width: 450px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    button {
      background: #323233;
      width: 100px;
      height: 30px;
      color: #797992;
    }
  }
}
</style>